<template>
<div class="table-box">
  <div class="padding: 15px 0px 9px 25px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
    <el-collapse accordion>
      <el-collapse-item>
        <template slot="title">
          检索条件<i class="header-icon el-icon-caret-bottom"></i>
        </template>
        <el-form v-if="users" :inline="true" :model="userForm" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="userForm.username" placeholder="张三"></el-input>
          </el-form-item>
          <el-form-item label="律所">
            <el-select v-model="userForm.college" clearable placeholder="请选择">
              <el-option v-for="(item,index) in categorys" :key="item.id" :label=item.college :value=item.college></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份">
            <el-select v-model="userForm.rid" clearable placeholder="请选择">
              <el-option label="客户" value="1"></el-option>
              <el-option label="律师" value="2"></el-option>
              <el-option label="管理员" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="float: right;margin-right: 10%">
            <el-button size="small" type="primary" @click="queryFuzzy(userForm)" icon="el-icon-search" round>查询</el-button>
            <el-button size="small" type="primary" @click="draweradduser = true" icon="el-icon-plus" round>新增</el-button>
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
  </div>
  <el-divider></el-divider>
  <el-table
      :data="users"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="编号"
        width="200"
        align="center">
    </el-table-column>
    <el-table-column
        prop="username"
        label="姓名"
        width="150"
        align="center">
    </el-table-column>
    <el-table-column
        prop="password"
        label="密码"
        width="300"
        align="center">
    </el-table-column>
    <el-table-column
        prop="gender"
        label="性别"
        width="50"
        align="center">
    </el-table-column>
    <el-table-column
        prop="age"
        label="年龄"
        width="50"
        align="center">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="联系电话"
        width="120"
        align="center">
    </el-table-column>
    <el-table-column
        prop="college"
        label="律所"
        width="250"
        align="center">
    </el-table-column>
    <el-table-column  label="身份"
                      width="100"
                      align="center">
    <template slot-scope="scope">
          <span v-if="scope.row.rid === '1'">
            客户
          </span>
      <span v-if="scope.row.rid === '2'">
           律师
          </span>
      <span v-if="scope.row.rid === '3'">
           管理员
          </span>
    </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="100"
        align="center">
      <template slot-scope="scope" >
        <el-button @click="update(scope.row.id)" type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
    <el-drawer
        title="用户新增"
        :visible.sync="draweradduser"
        :with-header="true">
      <el-form :model="UserForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="UserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="UserForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="UserForm.age"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="UserForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="律所" prop="college">
          <el-select v-model="UserForm.college" >
            <el-option v-for="(item,index) in categorys" :key="item.id" :label=item.college :value=item.college></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份" prop="rid">
          <el-select v-model="UserForm.rid" >
            <el-option label="客户" value="1"></el-option>
            <el-option label="律师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="UserForm.gender">
            <el-radio label="男" value="1"></el-radio>
            <el-radio label="女" value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer
        title="用户修改"
        :visible.sync="drawerupdateuser"
        :with-header="true">
      <el-form :model="userupdata" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userupdata.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userupdata.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="userupdata.age"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="userupdata.phone"></el-input>
        </el-form-item>
        <el-form-item label="律师事务所" prop="college">
          <el-select v-model="userupdata.college" >
            <el-option v-for="(item,index) in categorys" :key="item.id" :label=item.college :value=item.college></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份" prop="rid">
          <el-select v-model="userupdata.rid" >
            <el-option label="学生" value="1"></el-option>
            <el-option label="教师" value="2"></el-option>
            <el-option label="管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="userupdata.gender">
            <el-radio label="男" value="1"></el-radio>
            <el-radio label="女" value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateForm('ruleForm')">修改</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size='6'
      layout="total, prev, pager, next"
      :total=total
      style="display: flex;justify-content: flex-end;margin-top: 30px;margin-right: 10%"
  >
  </el-pagination>
  </div>
</div>
</template>

<script>
import {findallUser, querycategory, queryUserFuzzy, deleteuser, saveuser,finduserbyid,updateuser} from "@/api/vcard";
export default {
  inject: ['reload'],
  name: "UserManage",
  data() {
    return {
      draweradduser: false,
      drawerupdateuser: false,
      total:null,
      users: [],
      userupdata:{},
      categorys:[],
      UserForm: {
        username: '',
        password: '',
        age: '',
        college: '',
        phone: '',
        rid: '',
        gender: '',
      },
      userForm:{},
      isflag: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 0, max: 3, message: '年龄在0~100', trigger: 'blur' }
        ],
        college: [
          { required: true, message: '请输入学院', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
        ],
        rid: [
          { required: true, message: '请输入身份', trigger: 'blur' },

        ],
        gender: [
          { required: true, message: '请输入性别', trigger: 'blur' },

        ]
      }
    };
  },
  created() {
   /* querycategory().then((res)=>{
      console.log(res);
      this.categorys = res.result
    })*/
    this.categorys=JSON.parse(sessionStorage.getItem("categorys"))
    this.getUserData(1)
  },
  methods: {
    update(uid){
      finduserbyid(uid).then((res)=>{
        this.userupdata=res.result
      })
      this.drawerupdateuser=true
    },
    updateForm(formName) {
      const _this=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateuser(_this.userupdata).then(resp => {
            if(!resp.success){
              this.$notify.error({
                title: '错误',
                message: resp.message
              });
            }else {
              this.$notify.success({
                title: '正确',
                message: resp.message
              });
              this.drawerupdateuser=false
              this.reload()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    deleteUser(uid){
      deleteuser(uid).then((res) => {
        if(res.success){
          // console.log(response.message);
          this.$notify({
            title: '成功',
            message: res.message,
            type: 'success'
          });
         this.reload()
        }else {
          this.$notify({
            title: '失败',
            message: res.message,
            type: 'error'
          });
        }
      })
    },
    getUserData(current){
      findallUser(current).then(response => {
        console.log(response.result.records);
        this.users=response.result.records
        this.total=response.result.total
      })
    },
    handleCurrentChange(current){
      if (this.isflag) {
        queryUserFuzzy(this.userForms,current).then(response => {
          this.users = response.result.records,
          this.total=response.result.total,
          this.isflag=true
        })
      }else {
        this.getUserData(current)
      }
    },
    queryFuzzy(userForms){
      queryUserFuzzy(userForms,1).then(response => {
        this.users = response.result.records,
            this.total=response.result.total,
            this.isflag=true
      })
    },
    saveForm(formName) {
      const _this=this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveuser(_this.UserForm).then(resp => {
            if(!resp.success){
              this.$notify.error({
                title: '错误',
                message: resp.message
              });
            }else {
              this.$notify.success({
                title: '正确',
                message: resp.message
              });
              this.draweradduser=false
              this.reload()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }

  },

}
</script>

<style scoped>

</style>